import {navdatas} from '../data/navdatas'

let DOM = new Proxy({}, {
    get(target, prop) {
        return (attr = {}, ...children) => {
            const el = document.createElement(prop)
            for (let key of Object.keys(attr)) {
                el.setAttribute(key, attr[key])
            }
            for (let child of children) {
                if (typeof child == 'string') {
                    child = document.createTextNode(child)
                }
                el.appendChild(child)
            }
            return el
        }
    }
})

export function createTopNav(datas) {
    let lis = []
    for (let [index, val] of datas.entries()) {
        if(index === 0) 
            lis.push(DOM.li({class: 'item item-active', key: index, page: index}, DOM.p({},val.title)))
        else
            lis.push(DOM.li({class: 'item', key: index, page: index}, DOM.p({},val.title)))
    }
    return DOM.ul({class: 'nav-ul'}, ...lis)
}

export function createLeftNav(datas, index) {
    datas = datas[index].children
    let lis = []
    for(let [index, val] of datas.entries()) {
        if(index === 0)
            lis.push(DOM.li({class: 'item item-active', key: index, to: val.to}, DOM.p({},val.title)))
        else
            lis.push(DOM.li({class: 'item', key: index, to: val.to}, DOM.p({},val.title)))
    }
    return DOM.ul({class: 'nav-ul'}, ...lis)
}

export function initNavDom() {
    let topNavDom = document.getElementById('topNav')
    let leftNavDom = document.getElementById('leftNav')

    let topNavs = createTopNav(navdatas)
    let leftNavs = createLeftNav(navdatas, 0)
    topNavDom.innerHTML = ''
    leftNavDom.innerHTML = ''
    topNavDom.appendChild(topNavs)
    leftNavDom.appendChild(leftNavs)
}